<template>
    <div class="supplier-list">
      <van-search
        v-model="searchQuery"
        placeholder="搜索供应商"
        @search="onSearch"
      />
      
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="fetchData"
        >
          <van-cell
            v-for="supplier in supplierList"
            :key="supplier.supplier_id"
            :title="supplier.name"
            :label="`联系人: ${supplier.contactPerson} | 电话: ${supplier.contactPhone}`"
            @click="viewSupplierDetail(supplier.supplierId)"
          />
        </van-list>
      </van-pull-refresh>
      
      <van-floating-bubble
        v-model:offset="offset"
        axis="xy"
        magnetic="x"
        @click="createNewSupplier"
      >
        <van-icon name="plus" size="24" />
      </van-floating-bubble>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { getSupplierList } from '@/api/supplier'
  
  export default {
    setup() {
      const router = useRouter()
      const supplierList = ref([])
      const loading = ref(false)
      const finished = ref(false)
      const refreshing = ref(false)
      const searchQuery = ref('')
      const page = ref(1)
      const pageSize = 10
      
      const offset = ref({ x: 200, y: 100 })
      
      const fetchData = async () => {
        if (refreshing.value) {
          supplierList.value = []
          page.value = 1
          refreshing.value = false
        
        }
        
        loading.value = true
        
        try {
          const params = {
            page: page.value,
            pageSize,
            search: searchQuery.value
          }
          
          const { data } = await getSupplierList(params)
          
          if (refreshing.value) {
            supplierList.value = data.list
          } else {
            supplierList.value = [...supplierList.value, ...data.list]
          }
          
          if (data.list.length < pageSize) {
            finished.value = true
          } else {
            page.value += 1
          }
        } catch (error) {
          console.error('获取供应商列表失败:', error)
        } finally {
          loading.value = false
          refreshing.value = false
        }
      }
      
      const onSearch = () => {
        refreshing.value = true
        fetchData()
      }
      
      const onRefresh = () => {
        refreshing.value = true
        fetchData()
      }
      
      const viewSupplierDetail = (id) => {
        router.push({ name: 'SupplierDetail', params: { id } })
      }
      
      const createNewSupplier = () => {
        router.push({ name: 'SupplierCreate' })
      }
      
      return {
        supplierList,
        loading,
        finished,
        refreshing,
        searchQuery,
        offset,
        fetchData,
        onSearch,
        onRefresh,
        viewSupplierDetail,
        createNewSupplier
      }
    }
  }
  </script>
  
  <style scoped>
  .supplier-list {
    padding-bottom: 50px;
  }
  </style>